<script>
    // 返回上一级
    function back() {
        window.history.go(-1);  //返回上一页
    }
</script>
<link rel="stylesheet" href="/static/mui-player/mui-player.min.css">
<style>
    /* 返回按钮样式 */
    .back-button {
        display: inline-flex;
        align-items: center;
        padding: 8px 16px;
        background: #1E9FFF;
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
        margin-bottom: 20px;
        transition: all 0.3s;
        font-size: 14px;
        border: none;
        user-select: none;
    }

    .back-button:before {
        content: "←";
        margin-right: 8px;
        font-size: 16px;
    }

    .back-button:hover {
        background: #0d8aee;
    }

    @media screen and (max-width: 767px) {
        .back-button {
            padding: 6px 12px;
            font-size: 13px;
        }
    }

    /* 标题样式 */
    .detail-title {
        font-size: 24px;
        color: #333;
        margin: 20px 0 30px;
        text-align: center;
        line-height: 1.4;
        padding: 0 10px;
    }

    @media screen and (max-width: 767px) {
        .detail-title {
            font-size: 18px;
            margin: 15px 0 20px;
        }
    }

    /* 图片内容区域 */
    .detail-content {
        margin-bottom: 30px;
        display: grid;
        gap: 15px;
        /* 默认移动端两列 */
        grid-template-columns: repeat(2, 1fr);
    }

    /* 平板设备：3列 */
    @media screen and (min-width: 768px) {
        .detail-content {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    /* 桌面设备：4列 */
    @media screen and (min-width: 1024px) {
        .detail-content {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .image-container {
        margin-bottom: 0;
        /* 移除底部间距，因为使用了grid的gap */
        background: #f8f8f8;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        /* 保持图片容器为正方形 */
        aspect-ratio: 1;
    }

    .detail-image {
        width: 100%;
        height: 100%;
        display: block;
        margin: 0 auto;
        transition: transform 0.3s ease;
        object-fit: cover;
        /* 确保图片填充整个容器 */
    }

    /* 图片悬停效果 */
    .detail-image:hover {
        transform: scale(1.05);
    }

    /* 图片加载动画容器调整 */
    .image-container.loading {
        min-height: unset;
        /* 移除最小高度，使用aspect-ratio */
    }

    /* 加载状态 */
    .loading-container {
        text-align: center;
        padding: 40px 0;
    }

    .loading-spinner {
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #1E9FFF;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    /* 视频容器样式 */
    .video-container {
        width: 100%;
        max-width: 800px;
        margin: 0 auto 30px;
        /* background: #000; */
        position: relative;
        aspect-ratio: 16/9;
        border-radius: 8px;
        /* overflow: hidden; */
        display: none;
        /* min-height: 400px !important; */
        /* 默认隐藏 */
    }

    /* 覆盖 MuiPlayer 默认样式 */
    .mui-player-container {
        --mui-primary-color: #1E9FFF !important;
    }

    /* 移除播放器的默认高度 */
    #mui-player {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    @media screen and (max-width: 767px) {
        .video-container {
            border-radius: 4px;
            margin-bottom: 20px;
        }
    }

    /* 错误提示样式 */
    .error-message {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        padding: 10px;
        font-size: 12px;
        background: rgba(255, 77, 79, 0.1);
    }

    /* 优化图片查看器样式 */
    .image-viewer-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.95);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .image-viewer-content {
        position: relative;
        max-width: 90vw;
        max-height: 90vh;
        user-select: none;
    }

    .image-viewer-content img {
        max-width: 100%;
        max-height: 90vh;
        object-fit: contain;
    }

    /* 添加轮播按钮样式 */
    .viewer-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.5);
        border: none;
        border-radius: 50%;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        z-index: 1001;
    }

    .viewer-btn:hover {
        background: rgba(0, 0, 0, 0.8);
    }

    .viewer-prev {
        left: 20px;
    }

    .viewer-next {
        right: 20px;
    }

    /* 图片计数器 */
    .image-counter {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 14px;
    }

    @media screen and (max-width: 767px) {
        .viewer-btn {
            width: 35px;
            height: 35px;
            font-size: 16px;
        }

        .viewer-prev {
            left: 10px;
        }

        .viewer-next {
            right: 10px;
        }
    }
</style>

{% include 'web/components/公共配置/文章详情页工具箱.html' %}

<!-- 返回按钮 -->
<div class="back-button" onclick="back()">返回上一页</div>

<!-- 加载动画 -->
<div class="loading-container" id="loading">
    <div class="loading-spinner"></div>
</div>

<!-- 文章标题 -->
<h1 class="detail-title" id="articleTitle"></h1>

<!-- 视频播放器容器 -->
<div class="video-container" id="videoContainer">
    <!-- <div id="mui-player"></div> -->
</div>

<!-- 视频操作 -->
<div class="video-controls">
    {% include 'web/components/文章详情页/视频操作栏.html' %}
</div>


<!-- 图片内容 -->
<div class="detail-content" id="imageContent"></div>

<!-- 优化图片查看器 -->
<div class="image-viewer-overlay" id="imageViewer" onclick="closeImageViewer(event)">
    <button class="viewer-btn viewer-prev" onclick="prevImage(event)">←</button>
    <div class="image-viewer-content">
        <img id="viewerImage" src="" alt="" onclick="event.stopPropagation()">
        <div class="image-counter">
            <span id="currentImageIndex">1</span>/<span id="totalImages">1</span>
        </div>
    </div>
    <button class="viewer-btn viewer-next" onclick="nextImage(event)">→</button>
</div>
<script src="/static/mui-player/mui-player.min.js"></script>
<script>
    // 获取文章URL参数
    function getArticleUrl() {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get('article_url');
    }


    // 存储所有图片信息
    let allImages = [];
    let currentImageIndex = 0;




    // 显示上一张图片
    function prevImage(event) {
        event.stopPropagation();
        if (currentImageIndex > 0) {
            currentImageIndex--;
            updateViewerImage();
        }
    }

    // 显示下一张图片
    function nextImage(event) {
        event.stopPropagation();
        if (currentImageIndex < allImages.length - 1) {
            currentImageIndex++;
            updateViewerImage();
        }
    }

    // 修改关闭图片查看器函数
    function closeImageViewer(event) {
        if (event) {
            const viewerContent = document.querySelector('.image-viewer-content');
            if (viewerContent.contains(event.target)) {
                return;
            }
        }
        const viewer = document.getElementById('imageViewer');
        viewer.style.display = 'none';
        document.body.style.overflow = '';
    }

    // 显示错误信息
    function showError(message) {
        hideLoading();
        layer.msg(message, { icon: 2 });
    }

    // 显示加载动画
    function showLoading() {
        document.getElementById('loading').style.display = 'block';
    }

    // 隐藏加载动画
    function hideLoading() {
        document.getElementById('loading').style.display = 'none';
    }

    // 页面加载完成后执行
    window.onload = async function () {
        await loadArticleDetail();
        console.log(play_url);
        let videoContainer = document.getElementById('videoContainer');
        if (Array.isArray(play_url)) {
            
            play_url.forEach((url, index) => {
                // 创建视频容器
                let videoContainer_ = document.createElement('div');
                videoContainer_.id = 'mui-player' + index;
                videoContainer_.style.margin = '20px 0';
                // 追加到视频容器
                videoContainer.appendChild(videoContainer_);
                new MuiPlayer({
                    container: '#mui-player' + index,
                    title: title,
                    src: url,
                    autoplay: false, // 禁用自动播放
                    volume: 0.6, // 设置默认音量
                    height: "600px",
                    parse: {
                        type: 'hls',
                        loader: Hls,
                        config: { // hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning
                            debug: false,
                        },
                    }
                });
                
            });

            
        } else {
            // 创建视频容器
            let videoContainer_ = document.createElement('div');
            videoContainer_.id = 'mui-player';
            videoContainer_.style.margin = '20px 0';
            // 追加到视频容器
            videoContainer.appendChild(videoContainer_);
            videoContainer.style.minHeight = '400px';
            videoContainer.style.overflow = 'hidden';
            new MuiPlayer({
                container: '#mui-player',
                title: title,
                src: play_url,
                autoplay: false, // 禁用自动播放
                volume: 0.6, // 设置默认音量
                height: "600px",
                parse: {
                    type: 'hls',
                    loader: Hls,
                    config: { // hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning
                        debug: false,
                    },
                }
            });
        }



    };


</script>